<template>
	
<view class="">
	<vannoticebar
	  left-icon="volume-o"
	  text="注意！！！图片每次修改都需要重新上传一次图片！！！。"
	/>
	<view class="addProduct">
		
		<view class="addProduct_baseMsg">
			<van-field
			    :value="productName"
			    placeholder="请输入产品名称"
			    border="false"
				label="产品名称"
			  />
			<van-field
			    :value="productBrief"
			    placeholder="请输入产品简介"
			    border="false"
				label="产品名称"
			  />
			<van-field
			    :value="productPrice"
			    placeholder="请输入产品价格"
			    border="false"
				label="产品价格"
			  />
		</view>
		<view class="addProduct_productImg">
			<vanButton type="primary" icon="plus" block @click="addProductImg">添加产品图片</vanButton>
		</view>
		<view class="addProduct_productImgView">
			<template v-for="item in productImgList">
				<image :src="item" mode="widthFix"></image>
			</template>
		</view>
		<view class="addProduct_productDetail">
			<vanButton type="primary" icon="plus" block @click="addProductDetail">添加产品详情</vanButton>
		</view>
		<view class="addProduct_productImgView">
			<template v-for="item in productDetail">
				<image :src="item" mode="widthFix"></image>
			</template>
		</view>
		<view class="addProduct_control">
			<vangoodsaction>
			  <vangoodsactionbutton text="添加产品" @click="onClickButton" />
			  <vangoodsactionbutton text="修改产品" @click="onClickButton" />
			</vangoodsaction>
		</view>
	</view>
</view>
</template>

<script>
	import vanField from '@/wxcomponents/vant/@vant/field'
	import vanButton from '@/wxcomponents/vant/@vant/button'
	import vangoodsaction from '@/wxcomponents/vant/@vant/goods-action'
	import vangoodsactionicon from '@/wxcomponents/vant/@vant/goods-action-icon'
	import vangoodsactionbutton from '@/wxcomponents/vant/@vant/goods-action-button'
	import vannoticebar from '@/wxcomponents/vant/@vant/notice-bar'
	export default {
		components:{
			vanField,vanButton,vangoodsaction,vangoodsactionbutton,vannoticebar
		},
		data() {
			return {
				productImgList:[
					
				],
				productDetail:[
					
				],
				productName:'',
				productBrief:'',
				productPrice:''
			};
		},
		methods:{
			addProductImg(){
				let vueComponents = this
				uni.chooseImage({
					success:function(list){
						console.log(list)
						let { tempFilePaths } = list
						vueComponents.productImgList = [...tempFilePaths]
					},
					fail:function(error){
						console.log(error)
					}
				})
			},
			addProductDetail(){
				let vueComponents = this
				uni.chooseImage({
					success:function(list){
						console.log(list)
						let { tempFilePaths } = list
						vueComponents.productDetail = [...tempFilePaths]
					},
					fail:function(error){
						console.log(error)
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.addProduct{
		width: 95%;
		margin: 1rem auto;
		.addProduct_productImg,.addProduct_productDetail{
			margin: 1rem auto;
			width: 96%;
		}
		.addProduct_productImgView{
			width: 100%;
			display: flex;
			justify-content: start;
			align-items: center;
			flex-flow: row wrap;
			image{
				margin: .3rem;
				width: 30%;
			}
		}
	}
</style>
